<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图路径规划导航</title>
    <style>
        body { 
            margin: 0; 
            padding: 20px; 
            font-family: Arial, sans-serif; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            text-align: center;
        }
        .header {
            color: white;
            margin-bottom: 40px;
        }
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }
        .map-options {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }
        .map-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            width: 300px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        .map-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        }
        .baidu-card {
            border-top: 5px solid #38f;
        }
        .gaode-card {
            border-top: 5px solid #0f0;
        }
        .map-icon {
            font-size: 3em;
            margin-bottom: 20px;
        }
        .baidu-icon {
            color: #38f;
        }
        .gaode-icon {
            color: #0f0;
        }
        .map-card h2 {
            margin: 0 0 15px 0;
            color: #333;
        }
        .map-card p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        .btn {
            background: #333;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            transition: background 0.3s ease;
        }
        .btn:hover {
            background: #555;
        }
        .baidu-btn {
            background: #38f;
        }
        .baidu-btn:hover {
            background: #27e;
        }
        .gaode-btn {
            background: #0f0;
            color: #333;
        }
        .gaode-btn:hover {
            background: #0d0;
        }
        .features {
            background: white;
            border-radius: 10px;
            padding: 30px;
            margin-top: 40px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        .features h2 {
            color: #333;
            margin-top: 0;
        }
        .feature-list {
            text-align: left;
            max-width: 600px;
            margin: 0 auto;
        }
        .feature-list li {
            margin-bottom: 15px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>地图路径规划服务</h1>
            <p>选择您喜欢的地图服务商，获取最佳路线规划</p>
        </div>
        
        <div class="map-options">
            <div class="map-card baidu-card" onclick="window.location.href='baidu_map.html'">
                <div class="map-icon baidu-icon">🌎</div>
                <h2>百度地图</h2>
                <p>使用百度地图进行路径规划，支持驾车、步行、骑行等多种出行方式，提供实时路况和多种路线偏好选择。</p>
                <button class="btn baidu-btn" onclick="window.location.href='baidu_map.html'">使用百度地图</button>
            </div>
            
            <div class="map-card gaode-card" onclick="window.location.href='gaode_map.html'">
                <div class="map-icon gaode-icon">🗺️</div>
                <h2>高德地图</h2>
                <p>使用高德地图进行路径规划，精准定位，智能推荐最优路线，支持多种出行方式和个性化偏好设置。</p>
                <button class="btn gaode-btn" onclick="window.location.href='gaode_map.html'">使用高德地图</button>
            </div>
        </div>
        
        <div class="features">
            <h2>功能特性</h2>
            <ul class="feature-list">
                <li>📍 精准地址解析与地理编码</li>
                <li>🚗 多种出行方式：驾车、步行、骑行</li>
                <li>🚦 智能路线规划与实时路况</li>
                <li>🧭 多种路线偏好：最短距离、避开拥堵、高速优先等</li>
                <li>📱 响应式设计，支持移动端使用</li>
                <li>🔄 实时路线更新与优化</li>
            </ul>
        </div>
    </div>
</body>
</html>